@charset "utf-8";
:root{
	--primary:#ddd;
	--dark:#333;
	--light:#fff;
	--shadow:0 1px 5px rgba(104, 104,104, 0.8);
}

html
{
box-sizing: border-box;

color: #333;
font-size: 80%;

}

body
{ 
background:#EDF0F2;
margin-top: 0px;
margin-left: 50px;
margin-right: 50px;
line-height: 1.4;
font-family: Comic Sans MS;
}
.animated
{
	top: 20%;
	font-size: 4rem;
	font-family: sans-serif;
	font-weight: bold;
	
}

.wrapper

{
position: relative;
	box-shadow: 0 1px 5px rgba(104, 104,104, 0.8);
	width: 100%;
	margin:0px;
	background:#F7F7F7;
margin-top: 170px;
}

.menurol label
{
	margin: 0 40px 0 ;
	font-size: 26px;
	line-height: 70px;
	display: none;

}
#toggle
{
	display:none;
}

.section
{

}
.intro
{


margin: 0;
top: 0px;
right: 0px;
left: 0px;	
background:white;
position: fixed;

z-index: 5000;

}

.main-nav
{		
	
	width: 100%;
	background:#01203B;
	box-shadow: 0 1px 5px rgba(104, 104,104, 0.8);

}
.main-nav ul
{
	margin: 0;
	text-align: center;
	padding: 0.5rem;
}
.main-nav ul li 
{

display: inline;
list-style: none;
margin-left:1.7rem;
margin-right:1.7rem;
margin-top: 0;
font-size: 1.3rem;

}
.main-nav ul li a
{
text-decoration: none;
color: #333;
font-weight: bold;
padding: 0.5rem;



color: #fff;
}
.activ
{
	background:#CB0E0E;
	padding: 0.5rem;
}
.main-nav ul li a:hover
{
background:#CB0E0E;
color:#fff;
 transition: 0.2s;
 margin: 0;

}

.logo 
{

text-align: center;

margin-left: 30px;
}
.logo img
{margin-top: 50px;
	margin-top: 10px;
	width: 500px;
}
img
{
	max-width: 100%;
}


.top-container
{
display: grid;
grid-gap:0px;
grid-template-areas:
'showcase '  

;

}
.showcase
{
	grid-area:showcase;
	min-height: 0px;
	background-size: cover;
	text-align: center;
margin-top: 0px;


}

.aboutus
{
	
}
.aboutus p
{


}
.aboutus h1
{
	font-size: rem;
	margin: 0;
		color: #333;
	
}
.wrapper
{
	text-align: center;
}

.services-a
{

	text-align: center;
}
.services-a h1
{
	color: #064470;
	font-size: 5rem;
}

.covers
{
	
	background:#064470;
	padding: 20px;
	
	

}
.my-container
{
	margin-top: 60px;
	width: 80%;}

.services{
	background:#A5BCCC ;
	text-align: center;
	padding: 1.5rem 2rem;

	
	overflow: hidden;

}
.services img
{
	-webkit-transition:all 0.5s ease;
	
}

.services img:hover
{
	transform: scale(1.1);
}

.mid-container
{
	font-size: 1.5rem;
	text-align: justify;
	margin: 20px;
background:#ddd;
line-height: 2;
display: grid;
grid-gap:20px;
grid-template-areas:
'pics pics'
'tect tect'
;
padding: 20px;
vertical-align:middle;
margin-left: 10%;
margin-right: 10%;
font-size: 1.2rem;

}

.mid-containers
{
	font-size: 1.5rem;
	text-align: justify;

	margin: 20px;
background:#ddd;
margin-top: 170px;
display: grid;
grid-gap:20px;
grid-template-areas:
'pics pics'
'tect tect'
;
padding: 20px;
vertical-align:middle;
margin-left: 10%;
margin-right: 10%;
font-size: 1.2rem;
line-height: 2;

}
.controlsys
{
	font-size: 1.5rem;
	text-align: justify;
	margin: 20px;
background:#ddd;
padding: 20px;
vertical-align:middle;
margin-left: 10%;
margin-right: 10%;
font-size: 1.2rem;

}

.box{
	background:#333 ;
	text-align: center;
	
	box-shadow: 0 1px 5px rgba(104, 104,104, 0.8);
	color: white;

}
.box p
{
	font-size: 150%;
	font-weight: bold;
	
}
h2 h1
{
color: 

}

.vist
{
	padding: 20px;
	background:red;
}
.btn
{
	text-decoration: none;
	width:100%;
	background:#CB0E0E;
	color: white;
	box-shadow: 0 1px 5px rgba(104, 104,104, 0.8);
	padding: 15px;
}
.btn:hover
{
	background:#E8A9A9 ;
color: #fff;
 transition: 0.2s;

}
.pics img
{
	width:100%;
	
}
h2
{
	color: #CB0E0E;
}
.tect h2
{
	padding:10px;
	background:#01203B; 
	margin-top: 0px;
	padding-top: 0px; 
	color: white;

}
.pics img
{
	width:300px;
}

.mid2-container
{line-height: 2;
	margin: 20px;
background:#fff;

display: grid;
grid-gap:20px;
grid-template-areas:
'mdsnote'

;text-align: justify;
padding: 20px;

margin-left: 10%;
margin-right: 10%;
font-size: 1.2rem;

}
.pice
{
	grid-area:pice;
}
.mdsnote
{
grid-area:mdsnote;

}
.mdsnote h2
{
		padding:10px;
	background:#01203B; 
	margin-top: 0px;
	padding-top: 0px; 
	color: white; 
}
/*.middle-container
{margin:50px;
	display: grid;
	grid-gap:20px;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	
}*/

.middle-containers
{width: 100%;
	background: red;


}



.services{

	background:#F0F0F0 ;
	text-align: center;
padding: 0;

	
	margin: 10px;
font-weight: bold;
	font-size: 1.2rem;
}
.services .img
{
max-width: 100%;
margin: 0;
padding: 0;
}
.services p
{
padding: 10px;
}
.services:hover
{ transition: 0.2s;
	background:#01203B ;
	color: white;
	
	
}
.services a:hover
{
	text-decoration: none;
	color: white;
}
.services a
{
	text-decoration: none;
	color: black;
}

.grp
{
	text-align: center;
padding: 50px;
font-size: 1.5rem;
}
 h1
{color: #CB0E0E;
	font-size: 5rem;
}
.mission
{
border-style: solid;
line-height: 2;
	border-right: none;
	border-left: none;
	padding: 20px;
	border-color: #ddd;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
}
.vission
{line-height: 2;
border-style: solid;
	border-top:none;
	border-right: none;
	border-left: none;
	padding: 20px;
	border-color: #ddd;
	margin-left: 20px;
	margin-right: 20px;
}
.policy
{line-height: 2;
border-style: solid;
	border-top:none;
	border-right: none;
	border-left: none;
	padding: 20px;
	border-color: #ddd;
	margin-left: 20px;
	margin-right: 20px;
}
.ourserv
{
	width: 100%;

	margin: 0;
padding:0;
}
.ourserv p

{
	padding: 70px;
font-size: 1.5rem;
padding-top: 0;
padding-bottom: 0;

}
.copyr
{
	margin-top: 20px;
	background:#01203B;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
	color: white;
	
}
.sec
{
	background:#fff;
	color: black;
}

.others
{
	text-align: justify-all;
	font-weight: normal;

}
.others a
{
	text-decoration: underline;
	color: white;
}
.others a:hover
{
	text-decoration: underline;
	color: #E8A9A9;
}


.my-col .btn
{


	width:100%;

}
.my-col .btn
{
font-size: 100%;
	text-decoration: none;
	width:100%;
		background:#F7F7F7;
	color: black;
	margin: 5px;
	padding: 5px;

}

.my-col .btn:hover
{
	    background-color: rgba(46, 132, 206, 0.7);
color: #fff;
 transition: 0.2s;

}
.my-col .btn a p
{

}


/*
.btn
{
	
}
.my-col .btn:hover
{
	background:#E8A9A9 ;
color: #fff;
 transition: 0.2s;

}*/


.my-cul
{
	margin:10px;
}









@media only screen and (max-width:1350px)

{

.mid-containers
{

margin-top: 200px;


}
	.wrapper

{

margin-top: 200px;
}

.logo 
{

text-align: center;


}
.logo img
{
	margin-top: 10px;
	width: 500px;
}

.menurol label
{

	display: block;
	cursor: pointer;
	font-size: 3rem;
	font-weight: bolder;
	color: #01203B;
}

.main-nav 
{
	text-align: center;
	cursor: pointer;
	display: none;


}
.main-nav a
{
	display: block;
	border-bottom: 1px solid #EAEAEB;
	margin: 0;
}

#toggle:checked + .main-nav
{
	display: block;
}


}

@media (max-width:997px)

{


.my-container
{
	width:50%;
	
}

	.wrapper

{

margin-top: 200px;
}

}

@media (max-width:570px)

{

body
{
	margin: 0;

}
.my-col .btn p
{
	
	text-align: center;
	font-size: 1.6rem;

}
.wrapper

{

margin-top: 900px;
}

}





@media (max-width:500px)

{

body
{
	margin: 0;

}
.wrapper

{

margin-top: 150px;
}

.my-col .btn p
{
	
	text-align: center;
	font-size: 1.2rem;

}
.gallery-container
{
	width:100%;

}
.my-col .btn 
{
	margin: 0;
	

}
.mid-containers
{

margin-top: 180px;


}
}
@media only screen and (max-width:571px)

{
.mid-containers
{

margin-top:180px;


}
	.wrapper

{

margin-top: 170px;
}

@media only screen and (max-width:525px)

{

	.wrapper

{

margin-top: 150px;
}
@media only screen and (max-width:444px)

{
body {
margin: 0px;

}
	.wrapper

{

margin-top: 120px;
}
.controlsys
{

margin-left: 0px;
margin-right: 0px;


}

}